<template>
  <el-popover
    placement="bottom"
    width="1000"
    trigger="manual"
    @show="showPopover"
    @hide="hidePopover"
    v-model="visible"
  >
    <el-form inline size="mini" ref="searchForm" label-width="80px">
      <el-form-item label="接口地址">
        <el-select v-model="searchForm.url" filterable clearable @change="paramChangeHandle" placeholder="可选择具体接口地址">
          <el-option
            v-for="url in urlList"
            :key="url"
            :label="url"
            :value="url">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统计时间">
        <el-select v-model="searchForm.time" @change="paramChangeHandle">
          <el-option
            v-for="statsTime in statsTimeList"
            :key="statsTime.value"
            :label="statsTime.name"
            :value="statsTime.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="接口数量">
        <el-select v-model="searchForm.showNum" @change="paramChangeHandle">
          <el-option
            v-for="showNum in showNumList"
            :key="showNum"
            :label="showNum + ''"
            :value="showNum">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="requestFlag" border @change="statsOnOffHandle">请求统计</el-checkbox>
      </el-form-item>
      <el-form-item>
        统计开始时间: {{ this.searchForm.startTime | timeFormat }}
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      max-height="400"
      highlight-current-row
      ref="logStatsTable"
    >
      <el-table-column type="index" header-align="center" align="center" label="序号" width="50"></el-table-column>
      <el-table-column prop="url" header-align="center" align="center" label="接口路径" width="150"></el-table-column>
      <el-table-column prop="requestNum" header-align="center" align="center" label="请求次数"></el-table-column>
      <el-table-column prop="successPercent" header-align="center" align="center" label="成功占比">
        <template v-slot="{row}">
          {{ row.successPercent + '%'}}
        </template>
      </el-table-column>
      <el-table-column prop="failPercent" header-align="center" align="center" label="失败占比">
        <template v-slot="{row}">
          {{ row.failPercent + '%'}}
        </template>
      </el-table-column>
      <el-table-column prop="successNum" header-align="center" align="center" label="成功次数"></el-table-column>
      <el-table-column prop="maxSuccessTime" header-align="center" align="center" label="最长处理时间" width="105"></el-table-column>
      <el-table-column prop="minSuccessTime" header-align="center" align="center" label="最短处理时间" width="105"></el-table-column>
      <el-table-column prop="avgSuccessTime" header-align="center" align="center" label="平均处理时间" width="105"></el-table-column>
      <el-table-column prop="failNum" header-align="center" align="center" label="失败次数"></el-table-column>
      <el-table-column prop="maxFailTime" header-align="center" align="center" label="最长处理时间" width="105"></el-table-column>
      <el-table-column prop="minFailTime" header-align="center" align="center" label="最短处理时间" width="105"></el-table-column>
      <el-table-column prop="avgFailTime" header-align="center" align="center" label="平均处理时间" width="105"></el-table-column>
      <el-table-column
        fixed="right"
        header-align="left"
        width="100"
        label="操作">
        <template v-slot="{ row }">
          <el-button type="text" icon="el-icon-plus" @click="addLimitConfigHandle(row.url)">限流</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button size="mini" plain icon="el-icon-view" slot="reference" @click="visible = !visible" style="margin-left: 10px;">流量监控</el-button>
  </el-popover>
</template>

<script>
  export default {
    name: "log-stats-popover",
    data() {
      return {
        // popover显示状态[true-显示 false-隐藏]
        visible: false,
        // 检索表单对象
        searchForm: {
          // 请求接口地址
          url: '',
          // 统计时长
          time: 60000,
          // 统计开始时间戳
          startTime: '',
          // 显示的统计接口数量
          showNum: 10,
        },
        // 统计数据列表
        dataList: [],
        // 请求接口地址列表
        urlList: [],
          // 统计时间列表
        statsTimeList: [
          {
            name: '一分钟',
            value: 60000
          },
          {
            name: '五分钟',
            value: 300000
          },
          {
            name: '十分钟',
            value: 600000
          },
          {
            name: '半小时',
            value: 1800000
          },
          {
            name: '一小时',
            value: 3600000
          },
        ],
        // 统计接口数量列表
        showNumList: [ 10, 20, 50, 100 ],
        // 请求定时器状态[true-开启 false-关闭]
        requestFlag: true,
        // 请求定时器
        requestTimer: undefined
      }
    },
    filters: {
      // 日期格式化
      timeFormat(value) {
        if (!value) {
          return ''
        }
        let date = new Date(value);
        let s = date.getFullYear() + '-';
        let month = date.getMonth() + 1
        if (month < 10) {
          s += '0'
        }
        s += month + '-'
        let day = date.getDate()
        if (day < 10) {
          s += '0'
        }
        s += day + ' '
        let hour = date.getHours()
        if (hour < 10) {
          s += '0'
        }
        s += hour + ':'
        let minute = date.getMinutes()
        if (minute < 10) {
          s += '0'
        }
        s += minute + ':'
        let second = date.getSeconds()
        if (second < 10) {
          s += '0'
        }
        s += second
        return s
      }
    },
    methods: {
      /**
       * 打开popover回调方法
       */
      showPopover() {
        if (this.requestFlag) {
          this.statsOnOffHandle(true);
        }
      },
      /**
       * 关闭popover回调方法
       */
      hidePopover() {
        this.statsOnOffHandle(false);
      },
      /**
       * 获取日志统计数据方法
       */
      getLogStats() {
        let now = Date.now();
        this.searchForm.startTime = now - this.searchForm.time;
        this.$axios.$post('/sys/log/stats', this.searchForm)
          .then(({ data }) => {
            this.dataList = data.dataList;
            if (data.urlList) {
              this.urlList = data.urlList;
            }
          })
          .catch(() => {});
      },
      /**
       * 请求参数切换事件
       */
      paramChangeHandle() {
        if (this.requestFlag) {
          this.statsOnOffHandle(true);
        }
      },
      /**
       * 统计请求开关事件
       * @param {boolean} value 最新值[true-开启统计 false-关闭统计]
       */
      statsOnOffHandle(value) {
        // console.log('value', value);
        clearInterval(this.requestTimer);
        if (value) {
          this.getLogStats();
          this.requestTimer = setInterval(() => {
            this.getLogStats();
          }, 5000);
        } else {
          this.searchForm.startTime = ''
        }
      },
      /**
       * 打开限流配置弹出框事件
       * @param {string} url 接口路径
       */
      addLimitConfigHandle(url) {
        // 暂停请求
        this.requestFlag = false;
        // 清理定时器
        this.statsOnOffHandle(false);

        this.$emit('add-limit-config', url)
      }
    }
  }
</script>

<style scoped>

</style>
